<template>
    <el-dialog :title="dialogTitle" :visible.sync="dialogVisible" width="500px">
        <el-form :model="form" label-width="120px" :rules="formRules" ref="form"  v-loading="formLoading">
            <el-form-item label="模板内容" prop="content">
                <el-input
                    v-model="form.content"
                    placeholder="请输入模板内容"
                    readonly
                    type="textarea"
                />
            </el-form-item>
            <el-form-item label="接收人" prop="userId">
                <el-select v-model="form.userId" placeholder="请选择接收人" clearable filterable @change="changeUser">
                    <el-option
                        v-for="item in userOption"
                        :key="item.id"
                        :label="item.name"
                        :value="item.id"
                    />
                </el-select>
            </el-form-item>
            <el-form-item label="项目" prop="projectId">
                <el-select v-model="form.projectId"
                           placeholder="请选择项目"
                           class="right-menu-item"
                           filterable
                >
                    <el-option
                        v-for="project in getProjectList"
                        :key="project.value"
                        :label="project.label"
                        :value="project.value"
                    >
                    </el-option>
                </el-select>
            </el-form-item>
            <el-form-item
                v-for="param in form.params"
                :key="param"
                :label="'参数 {' + param + '}'"
                :prop="'templateParams.' + param"
            >
                <el-input
                    v-model="form.templateParams[param]"
                    :placeholder="'请输入 ' + param + ' 参数'"
                />
            </el-form-item>
        </el-form>
        <div slot="footer" class="dialog-footer">
            <el-button size="small" type="primary" @click="submitForm">确 定</el-button>
            <el-button size="small" @click="dialogVisible = false">取 消</el-button>
        </div>
    </el-dialog>
</template>

<script>
import {getNotifyTemplate,sendNotify} from '@/api/system/notity/template'
import {getUserSelect} from '@/api/system/user'
import { mapGetters } from 'vuex'

export  default {
    data(){
        return{
            dialogTitle:'',
            dialogVisible:false,
            form:{
                content: '',
                params: {},
                userId: null,
                templateCode: '',
                templateParams: new Map()
            },
            formLoading:false,
            userOption:[],
            getProjectList: [],
            // 表单校验
            formRules: {
                userId: [
                    { required: true, message: "用户编号不能为空", trigger: "blur" }
                ],
                templateCode: [
                    { required: true, message: "模版编号不能为空", trigger: "blur" }
                ],
                templateParams: {}
            }
        }
    },
    computed:{
        ...mapGetters([
            'projectList',
        ]),
    },
    methods:{
        // 根据当前登录的用户获取项目(经销商)
        getTopRightProjectList() {
            this.getProjectList = this.projectList
        },
       async open(row){
            this.dialogVisible = true
            this.dialogTitle = '测试发送'
           // 设置数据
           this.formLoading = true
            try {
                const {data} = await getNotifyTemplate(row.id)
                console.log('data',data)
                // 设置动态表单
                this.form.content = data.content
                this.form.params = data.params
                this.form.templateCode = data.code
                if(data.params.length > 0){
                    this.form.templateParams = data.params.reduce((obj, item) => {
                        obj[item] = '' // 给每个动态属性赋值，避免无法读取
                        return obj
                    }, {})
                    this.formRules.templateParams = data.params.reduce((obj, item) => {
                        obj[item] = { required: true, message: '参数 ' + item + ' 不能为空', trigger: 'blur' }
                        return obj
                    }, {})
                }
            } finally {
                this.formLoading = false
            }
            const res = await getUserSelect()
           this.userOption = res.data
           this.getTopRightProjectList()
           console.log(res)
        },
        // 选择用户获取用户类型
        changeUser(val){
            this.userOption.forEach(item=>{
                if(val===item.id){
                    console.log(item)
                    this.form.userType = item.type
                }
            })
        },
        submitForm() {
            this.$refs['form'].validate(async valid => {
                if (valid) {
                    const {data} = await sendNotify(this.form)
                    console.log()
                    if (data) {
                        this.$message.success('提交发送成功！发送结果，见发送日志编号：' + data)
                    }
                    this.dialogVisible = false
                }
            })
        },
    }
}


</script>

<style scoped>

</style>
